<template>

<div align="center">
  <span class="demonstration">请选择想要查看的月份</span>
  <div style="padding-top: 10px;padding-left: 10px">
    <el-date-picker style="width: 500px"

        v-model="value1"

         @change="MonthlySales"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份">
    </el-date-picker>

</div>

  <div id="MonthlySales" :style="{width: '800px', height: '600px'}"></div>

</div>


</template>

<script>
import request from "../../utils/request";

export default {
  data(){
    return {
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2021, 0, 1), new Date(2021, 12, 29)]


    };
  },

  name: "Statistics",



  methods:{
    load(){

    },

    MonthlySales(val){

      let myChart = this.$root.echarts.init(document.getElementById('MonthlySales'))
      let option = {
        title: {
          text: '销售额情况单位（元）￥',

          left: 'left'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      };
      request.get("/Statistics/selectInfo1",{
        params:{
          val1:val[0],
          val2:val[1]
          }
      }).then(res => {

        res.data.forEach(item => {
          option.xAxis.data.push(item.key)
          option.series[0].data.push(item.value)
        })
        // 绘制图表
        myChart.setOption(option);
      })
    },


  },
}

</script>



<style scoped>

</style>